

html







 html
      
http://www.khayma.com/hpinarabic/htutor01.html
pdf





HTML
<HTML>
<
/HTML>
<HEAD>
<
/HEAD>
<TITLE>
<
/TITLE>
<BODY>
<
/BODY>
Html
Html
HTML
/HTML
HEAD

TITLE
/TITLE
/HEAD
BODY

/BODY


<HTML>
<HEAD>
<TITLE>
This is a test Webpage
<
/TITLE>
<
/HEAD>
<BODY>
Wow, I'm writing my first webpage
<
/BODY>
<
/HTML>
HTML
htm
html
1st_file.htm
C:\htmfiles
Netscape
Navigator

Open
File

File
MS Internet Explorer
Open

File
C:\htmfiles\1st_file.htm


UPPERCASE
lowercase
Enter
Html

<HTML><HEAD><TITLE> This is a test Webpage </TITLE></HEAD><BODY>
Wow, I'm writing my first webpage </BODY></HTML>
<HTML>
<HEAD>
<TITLE>
This
is a
test
Webpage
<
/TITLE>
<
/HEAD>
<BODY>
Wow,
I'm
writing
my
first
webpage
<
/BODY>
<
/HTML>
<HTML> <HEAD> <TITLE>
This is a test Webpage
<
/TITLE>
<
/HEAD>
<BODY>
Wow, I'm writing my first webpage
<
/BODY>
<
/HTML>

BR
<HTML>
<HEAD>
<TITLE>
This is a test Webpage
<
/TITLE>
<
/HEAD>
<BODY>
Wow, <BR> I'm writing my <BR>
first webpage
<
/BODY>
<
/HTML>
P

<HTML>
<HEAD>
<TITLE>
This is a test Webpage
<
/TITLE>
<
/HEAD>
<BODY>
Wow, <P> I'm writing my <P>
first webpage
<
/BODY>
<
/HTML>
nbsp;
Non Breakable Space
<HTML>
<HEAD>
<TITLE>
This is a test Webpage
<
/TITLE>
<
/HEAD>
<BODY>
Wow, &nbsp; &nbsp; &nbsp;
I'm &nbsp; &nbsp; &nbsp;writing &nbsp; &nbsp;
&nbsp; my &nbsp; &nbsp; &nbsp; first &nbsp; &nbsp; &nbsp; webpage
<
/BODY>
<
/HTML>


HTML



HTML

BODY




BODY
/BODY

Attribute
<BODY BGCOLOR="FFFFFF">
...
<
/BODY>

BGCOLOR
BODY
FFFFFF
CC



FFFFFF

A,B,C,D,E,F

FF
FF
FF
FF

CC

ABCDEF
FFFF00
FEDCBA
336699
773466
112233
FF1122
666666
0033FF
663333
AABBAA
00FF00
800800
FF6600
008008
993366
020769
123456
111111
654321


Black
White
Red
Green
Marron
Purple
Navy
Blue
Teal
Lime
Gray
Silver
Olive
Aqua
Fuchsia
Yellow

<BODY BGCOLOR="#FFFFFF" BACKGROUND="image.jpg">
...
<
/BODY>
BACKGROUND
image.jpg
BGCOLOR
Text-Based Browsers


BODY
Links

visited
links
active links
<BODY BACKGROUND="backimag.jpg"
BGCOLOR="#ffff00"
TEXT="#000066"
LINK="#00ff00"
VLINK="#ff0000"
ALINK="#999999">
backimag.jpg
HTML

Times New
Roman
FONT
FONT
Face
<FONT FACE="Traditional Arabic, Arabic Transparent,
Simplified Arabic">
... Text ...
<
/FONT>
Color
<FONT COLOR="#FF0000">
... Text ...
<
/FONT>
Size
<FONT SIZE="4">
... Text ...
<
/FONT>


<FONT SIZE="+4">
... Text ...
<
/FONT>










<FONT FACE="arial" SIZE="6" COLOR="#FF0000">
This font is Arial, Size is 6, Color is Red
<
/FONT>
This font is Arial, Size is 6, Color is Red
<FONT FACE="arial" SIZE="+3" COLOR="#FF0000">
This font is Arial, Size is +3, Color is Red
<
/FONT>
This font is Arial, Size is
+3, Color is Red

<FONT FACE="Times New Roman" SIZE="5" COLOR="#0000FF">
This font is Times New Roman, Size is 5, Color is Blue
<
/FONT>
This font is Times New Roman, Size is 5, Color is
Blue
<FONT FACE="courier" SIZE="2" COLOR="#800000">
This font is Courier, Size is 2, Color is Maroon
<
/FONT>
This font is Courier, Size is 2, Co lor is Maroon
<FONT FACE="Arial" SIZE="5" COLOR="#00FF00"> This <
/FONT>
<FONT FACE="Times New Roman" SIZE="7" COLOR="#FF00FF"> is <
/FONT>
<FONT FACE="Arial" SIZE="2" COLOR="#FF0000"> multi <
/FONT>
<FONT FACE="Impact" SIZE="4" COLOR="#000000"> colors, <
/FONT>
<FONT FACE="Courier" SIZE="2" COLOR="#0000FF"> multi <
/FONT>
<FONT FACE="Times New Roman" SIZE="3" COLOR="#008080"> faces,
<
/FONT>
<FONT FACE="Courier" SIZE="6" COLOR="#FFFF00"> and <
/FONT>
<FONT FACE="Arial" SIZE="5" COLOR="#808080"> multi <
/FONT>
<FONT FACE="Impact" SIZE="2" COLOR="#800000"> sizes <
/FONT>
<FONT FACE="Times New Roman" SIZE="7" COLOR="#00FFFF"> text
<
/FONT>
This is multi
colors,
multi faces, and multi
sizes
text
<FONT FACE="Impact" SIZE="6" COLOR="#000000">C <
/FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#008080">O<
/FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#FF0000">L<
/FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#0000FF">O<
/FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#800000">R<
/FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#FF00FF">S<
/FONT>
C
O
L
O
R
S
BASEFONT

BODY
FONT
Name
Face

<BASEFONT Name="Arial" COLOR="#FF0000" SIZE="5">

Arial
Font

Font
BASEFONT

Text
Body
Color
BASEFONT
BASEFONT
Headings
<Hn> ... <
/Hn>
n
.
<H1> Heading 1 <
/H1>
<H2> Heading 2 <
/H2>
<H3> Heading 3 <
/H3>
<H4> Heading 4 <
/H4>
<H5> Heading 5 <
/H5>
<H6> Heading 6 <
/H6>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Head ing 6

<B> ... <
/B>
<STRONG> ... <
/STRONG>
<B> Bold Text <
/B>
This is Bold Text
<STRONG> Strong Text
<
/STRONG>
This is Strong Text
<I> ... <
/I>
<EM> ... <
/EM>
<I> Italic Text <
/I>
This is Italic Text
<EM> Emphasized Text <
/EM>
This is Emphasized Text
<U> ... <
/U>
<U> Undelined Text <
/U>
Undelined Text This is

<SUP> ... <
/SUP>
<SUP> Superscript Text
<
/SUP>
This is
Supersc ript Tex t
<SUB> ... <
/SUB>
<SUB> Subscript Text <
/SUB>
This is
Subs cri pt Text
<BIG> ... <
/BIG>
<BIG> Big Text </BIG>
This is Big Text
<SMALL> ... <
/SMALL>
<SMALL> Small Text <
/SMALL>
This is Small Text

<STRIKE> ... <
/STRIKE>
<S> ... <
/S>
<STRIKE> Striked Text
<
/SRTIKE>
This is Striked Text
<S> Striked Text <
/S>
This is Striked Text too
TeleType
<TT> ... <
/TT>
<TT> TeleType Text <
/TT>
This is TeleType Text
Monospaced Text

m,i
m

i
iiiiiiiiii
mmmmmmmmmm
TT
/TT
iiiiiiiiii
mmmmmmmmmm
<B><I><U>
This is a Bold, Italic and Underlined Text
<
/U> <
/I> <
/B>
This is a Bold, Italic and Underlined Text
<FONT COLOR="#FF0000" SIZE="+3"><U><I>
This text is red, size +3, Italic, and Underlined
<
/I> <
/U> <
/FONT>
This text is red, size +3,
Italic, and Underlined

<B><I><U>
This is a Bold, Italic and Underlined Text
<
/B> <
/I> <
/U>
<B><I><U>
This is a Bold, Italic and Underlined Text
<
/B> <
/U> <
/I>

HTML
P
BR
nbsp;

P
P
/P
ALIGN, DIR

ALIGN
Left
Center, Right

<P Align="left"> This is a left-aligned paragraph <
/P>
This is left-aligned paragraph
<P Align="right"> This is right-aligned paragraph</P>
This is a right-aligned paragraph
<P Align="center"> This is a centered paragraph</P>
This is a centered paragraph
CENTER
CENTER

<CENTER> This is a centered text </CENTER>
This is a centered text
DIR
P
LTR
(Left To
Right)
RTL
(Right To
Left)
BLOCKQUOTE
/BLOCKQUOTE


BLOCKQUOTE
/BLOCKQUOTE


<BLOCKQUOTE>
<BLOCKQUOTE>
<
/BLOCKQUOTE>
<
/BLOCKQUOTE>

A B C D
E F G H
I J K L
M N O P
Q R S T
nbsp;
BR

<PRE> ... </PRE>
Preformated

A B C D E F G H I J K L M N
O P Q R S T
HTML
Ordered Lists
Unordered Lists
<OL> ... <
/OL>
<UL> ... <
/UL>
LI
List Item

<OL>
<LI>
<LI>
<LI>
<LI>
<LI>
<LI>
<
/OL>
<UL>
<LI>
<LI>
<LI>
<LI>
<
/UL>
TYPE
UL
OL
LI

A, a, I, i

<OL TYPE="A">
<OL TYPE="a">
<OL TYPE="I">
<OL TYPE="i">
HTML

Disc

TYPE
square
circle
<UL TYPE="square">
<UL TYPE="circle">


UL
/UL
<DIR> ... <
/DIR>
<MENU> ... <
/MENU>
Definition Lists
HTML
Hyper Text Markup Language
WWW
World Wide Web
FTP
File Transfer Protocol
GIF
Graphical Interchange Format
JPG, JPEG
Joint Photographic Experts Group
DL
/DL
DT

DD
<DL>
<DT>HTML <DD>Hyper Text Markup Language
<DT>WWW <DD>World Wide Web
<DT>FTP <DD>File Transport Protocol
<DT>GIF <DD>Graphical Interchange Format
<DT>JPG, JPEG <DD>Joint Photographic Experts Group
<
/DL>
HTML



IMG
SRC
thedome.jpg
<IMG SRC="thedome.jpg">
HTML
HTML
HTML
HT
ML
images
Pixel


HEIGHT, WIDTH
<IMG SRC="thedome.jpg" HEIGHT="70" WIDTH="120">
<IMG SRC="thedome.jpg" HEIGHT="300" WIDTH="500">
IMG
ALT
<IMG SRC="thedome.jpg" ALT="The Dome Of The Rock">

ALIGN
BOTTOM, TOP

MIDDLE, LEFT,
RIGHT


BOTTOM
<IMG SRC="image.jpg" ALIGN="BOTTOM">
TOP
<IMG SRC="image.jpg" ALIGN="TOP">
MIDDLE
<IMG SRC="image.jpg" ALIGN="MIDDLE">
LEFT
<IMG SRC="image.jpg" ALIGN="LEFT">
RIGHT
<IMG SRC="image.jpg" ALIGN="RIGHT">
VSPACE
HSPACE
<IMG SRC="image.jpg" ALIGN="RIGHT" VSPACE="20" HSPACE="20">
image.jpg



ALIGN
RIGHT
IMG
BORDER



<IMG SRC="image.jpg" BORDER="5">
JPG

JPEG
ointJ
hotographicP
xpertsE
roupG


GIF
raphicalG
nterchangeI
ormatF
JPG
GIF
Transparent
Images
Animated Gifs

Paint Shop
Pro

JPG
GIF
Resolution



Windows
Pixel

Picture Element

Thumbnail




Paint Shop Pro
WIDTH, HEIGHT


HTML
Links
E-mail
<A> ... <
/A>
Anchor

HREF
http://www.sakhr.com
<A HREF="http://www.sakhr.com"> <
/A>

A
/A
Go To
SAKHR
<A HREF="http://www.sakhr.com">Go To SAKHR<
/A>
Go To SAKHR
SAKH
R
Go To <A HREF="http://www.sakhr.com">SAKHR<
/A>
KHRSAGo To
A
/A
<A HREF="http://www.sakhr.com"><IMG SRC="sakhrlgo.gif">
<
/A>

A
/A

BORDER="0"

<A HREF="http://www.sakhr.com"><IMG SRC="sakhrlgo.gif" BORDER="0"><
/A>
<A HREF="http://www.sakhr.com"><IMG SRC="sakhrlgo.gif" BORDER="6 "><
/A>
HTML
HREF
index.html
<A HREF="index.html">Main Page<
/A>
Main Page
<A HREF="nablus1.jpg"><IMG SRC="nablus_1.jpg" BORDER="0"><
/A>
nablus_1.jpg
nablus1.jpg
A
NAME
Links

A
/A

<A>LINKS<
/A>
NAME
attrib1
<A NAME="attrib1">LINKS<
/A>
htutor06.html
<A HREF="htutor06.html#attrib1">3rd Paragraph<
/A>
3rd Paragraph
MAILTO
HREF
EMAIL
<A HREF="MAILTO:yahya@palnet.com"> Email Me <
/A>
Email Me

Email
HTTP
HyperText Transfer Protocol
Email
MAILTO

FTP (File Transfer
Protocol)
News
Groups

NNTP (Network News Transfer
Protocol)

FTP
Windows95

FTP
ftp://ftp.simtel.net/pub/simtelnet/win95/
<A HREF="ftp://ftp.simtel.net/pub/simtelnet/win95/">Simtel FTP Server<
/A>
Simtel FTP Server
NEWS

alt.html
HTML
<A HREF="news:alt.html">Alt.Html<
/A>
Alt.Html

HTML

HTML

HTML


<TABLE>...<
/TABLE>
<TR>...<
/TR>
Table Row
<TD> Cell Data <
/TD>
Table Data

<TABLE> ... <
/TABLE>

<TR> ... <
/TR>
<TABLE>
<TR>
<
/TR>
<TR>
<
/TR>
<TR>
<
/TR>
<
/TABLE>
<TD> ... <
/TD>
TR
/TR


<TABLE>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<
/TABLE>
Data
Data
Data
Data
Data
Data

TABLE
/TABLE


BORDER


<TABLE BORDER="5">
<TABLE BORDER="0">
WIDTH
<TABLE WIDTH="600">
<TABLE WIDTH="80%">
HEIGHT
<TABLE HEIGHT="500">
<TABLE HEIGHT="100%">
CELLSPACING
<TABLE CELLSPACING="10">
CELLPADDING
<TABLE CELLPADDING="10">
ALIGN
right

left
<TABLE ALIGN="Left">
<TABLE ALIGN="Right">
BGCOLOR
<TABLE BGCOLOR="#00FFFF">
<TABLE BORDER="5">
Data
Data
Data
Data
Data
Data
<TABLE BORDER="5" CELLPADDING="5">
Data
Data
Data
Data
Data
Data
<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10">
Data
Data
Data
Data
Data
Data
<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"
BGCOLOR="#FFFF00">
Data
Data
Data
Data
Data
Data
<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"
BGCOLOR="#FFFF00" HEIGHT="300">
Data
Data
Data
Data
Data
Data
<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"
BGCOLOR="#FFFF00" HEIGHT="300" WIDTH="75%">
Data
Data
Data
Data
Data
Data
TR
/TR
ALIGN
Right, Left,
Center

Center
VALIGN
Top, Bottom, Middle

Baseline
BGCOLOR

TABLE

<TABLE BORDER="5" HEIGHT="300">
<TR ALIGN="Left">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR ALIGN="Right">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR ALIGN="Center">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<
/TABLE>
Data
Data
Data
Data
Data
Data
<TABLE BORDER="5" HEIGHT="300">
<TR VALIGN="Top">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR VALIGN="Bottom">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR VALIGN="Baseline">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<
/TABLE>
Data
Data
Data
Data
Data
Data
<TABLE BORDER="5" HEIGHT="300" BGCOLOR="#FFFFFF">
<TR BGCOLOR="#808080">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR BGCOLOR="#C0C0C0">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<
/TABLE>
Data
Data
Data
Data
Data
Data
<TABLE BORDER="0" HEIGHT="100%" WIDTH="100%">
<TR BGCOLOR="#808080">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR BGCOLOR="#C0C0C0">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR BGCOLOR="#FFFFFF">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<
/TABLE>
Data
Data
Data
Data
Data
Data

HTML

TD
/TD
HTML
<TABLE>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<
/TABLE>
ALIGN
Left, Center, Right
VALIGN
Top, Middle, Bottom, Baseline
WIDTH
HEIGHT
BGCOLOR
COLSPAN
<TD COLSPAN="n">
n
ROWSPAN
<TD ROWSPAN="n">
n
BGCOLOR

BODY
WIDTH, HEIGHT


TABLE
<TABLE BORDER="5">
<TR>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<
/TR>
<
/TABLE>
Data
Data
Data
Data
COLSPAN,
ROWSPAN

<TABLE BORDER="5">
<TR>
<TD COLSPAN="2"> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD COLSPAN="2"> Data <
/TD>
<
/TR>
<
/TABLE>
Data
Data
Data
Data
<TABLE BORDER="5">
<TR>
<TD ROWSPAN="3"> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<
/TR>
<
/TABLE>
Data
Data
Data
Data
TH
/TH

Table Header
TD
/TD

TD
CAPTION
/CAPTION

TABLE

<TABLE BORDER="5">
<CAPTION> Table Caption <
/CAPTION>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<
/TABLE>
Table Caption
Data
Data
Data
Data
Data
Data
HTML
Frames



Html


frame1.html, frame2.html,
frame3.html
<HTML>
<HEAD>
<TITLE>Frame1<
/TITLE>
<
/HEAD>
<BODY>
Frame 1
<
/BODY>
<
/HTML>
<FRAMESET> ... <
/FRAMESET>
BODY
/BODY

BODY
<HTML>
<HEAD>
<TITLE>Master File<
/TITLE>
<
/HEAD>
<FRAMESET>
<
/FRAMESET>
<
/HTML>
COLS



<FRAMESET
COLS="50%,50%">
<
/FRAMESET>
*

<FRAMESET
COLS="20%,50%,30%">
<
/FRAMESET>
*


<FRAMESET
COLS="200,300,*">
<
/FRAMESET>
*


<FRAMESET
COLS="200,*,15%,20%">
<
/FRAMESET>
*


<FRAMESET
COLS="150,*,2*">
<
/FRAMESET>
*


ROWS

<FRAMESET
ROWS="50%,50%">
<
/FRAMESET>
*

<FRAMESET
ROWS="20%,50%,30%">
<
/FRAMESET>
*

<FRAMESET
ROWS="50,120,*">
<
/FRAMESET>
*

<FRAMESET
ROWS="50,*,15%,20%">
<
/FRAMESET>
*


<FRAMESET
COLS="*,2*">
<
/FRAMESET>
*

FRAMESET
FRAME
BODY

IMG SRC="imagname.ext

FRAME
IMG
FRAMESET
SRC
<FRAMESET COLS="50%,50%">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<
/FRAMESET>
<FRAMESET COLS="200,400,*">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<
/FRAMESET>
<FRAMESET ROWS="50,*,15%,20%">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<FRAME SRC="frame4.html">
<
/FRAMESET>
<FRAMESET COLS="*,2*">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<
/FRAMESET>

FRAME SRC
IMG
SRC
<FRAMESET COLS="50%,50%">
<FRAME SRC="frame1.html">
<FRAME SRC="thedome.jpg">
<
/FRAMESET>
*
HTML
FRAMESET
/FRAMESET
BODY

BODY
COLS, ROWS

FRAME
SRC

<FRAMESET ROWS="100,*">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<
/FRAMESET>
HTML
FRAMESET
<FRAMESET ROWS="100,*">
<FRAME SRC="frame1.html">
<FRAMESET>
<
/FRAMESET>
<
/FRAMESET>

<FRAMESET ROWS="100,*">
<FRAME SRC="frame1.html">
<FRAMESET COLS="200,*">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<
/FRAMESET>
<
/FRAMESET>
<FRAMESET COLS="100,*,100">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<
/FRAMESET>
<FRAMESET ROWS="80,*">
<FRAME SRC="frame2.html">
<FRAME SRC="frame4.html">
<
/FRAMESET>
<FRAMESET COLS="100,*,100">
<FRAME SRC="frame1.html">
<FRAMESET ROWS="80,*">
<FRAME SRC="frame2.html">
<FRAME SRC="frame4.html">
<
/FRAMESET>
<FRAME SRC="frame3.html">
<
/FRAMESET>
HTML


FRAMESET

BODY
FRAME


FRAMESET
Netscape, MS
Explorer
FRAMEBORDER
<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<FRAME SRC="frame4.html">
<
/FRAMESET>
*
BORDER
BORDER="n"
Netscape
BORDERCOLOR

BORDERCOLOR="rrggbb"
Netscape
FRAMESPACING

FRAMESPACING="n"
MS Explorer

FRAME
MARGINHEIGHT
MARGINHEIGHT="n"
MARGINWIDTH
MARGINWIDTH="n"
SCROLLING
yes
no
auto
Windows
SCROLLING="yes"
SCROLLING="no"
SCROLLING="auto"
NORESIZE




NORESIZE
<FRAMESET COLS="50%,50%">
<FRAME SRC="thedome.jpg" MARGINHEIGHT="40">
<FRAME SRC="frame2.html">
</FRAMESET>
*
<FRAMESET COLS="50%,50%">
<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30">
<FRAME SRC="frame2.html">
</FRAMESET>
*
<FRAMESET COLS="50%,50%">
<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30"
SCROLLING="yes">
<FRAME SRC="frame2.html">
</FRAMESET>
*
<FRAMESET COLS="50%,50%">
<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30"
SCROLLING="yes" NORESIZE>
<FRAME SRC="frame2.html">
</FRAMESET>
*
FRAMEBORDER, FRAMESPACING, BORDER,
BORDERCOLOR
FRAMESET
NAME



<NOFRAMES> ... <
/NOFRAMES>
Netscape, MS
Explorer
<HTML>
<HEAD>
<TITLE>Main File<
/TITLE>
<
/HEAD>
<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<FRAME SRC="frame4.html">
<
/FRAMESET>
<NOFRAMES>
<BODY>
<
/BODY>
<
/NOFRAMES>
<
/HTML>

HTML


NAME

FRAME


BACK
mainfile.html
<HTML>
<HEAD>
<TITLE>Main File<
/TITLE>
<
/HEAD>
<FRAMESET ROWS="60,*">
<FRAME SRC="header.html" NORESIZE SCROLLING="NO"
MARGINHEIGHT="1" MARGINWIDTH="1">
<FRAMESET COLS="120,*">
<FRAME SRC="lftframe.html" NORESIZE SCROLLING="NO"
MARGINHEIGHT="1" MARGINWIDTH="1">
<FRAME SRC="htmintro.html">
<
/FRAMESET>
<
/FRAMESET>
<
/HTML>
header.html
<HTML>
<HEAD>
<TITLE>Header File<
/TITLE>
<
/HEAD>
<BODY bgcolor="#BCD8EB">
<CENTER><IMG SRC="frambnr.jpg"><
/CENTER>
<
/BODY>
<
/HTML>
lftframe.html
<HTML>
<HEAD>
<TITLE>Buttons<
/TITLE>
<
/HEAD>
<BODY BGCOLOR="#BCD8EB">
<A HREF="htutor01.html"><IMG SRC="lesson1.jpg"></A><BR>
<A HREF="htutor02.html"><IMG SRC="lesson2.jpg"></A><BR>
<A HREF="htutor03.html"><IMG SRC="lesson3.jpg"></A><BR>
<A HREF="htutor04.html"><IMG SRC="lesson4.jpg"></A><BR>
<A HREF="htutor05.html"><IMG SRC="lesson5.jpg"></A><BR>
<
/BODY>
<
/HTML>

htmintro.html
NAME
A
/A
TARGET

NAME
FRAME


FRAME
mainwindow
<HTML>
<HEAD>
<TITLE>Main File<
/TITLE>
<
/HEAD>
<FRAMESET ROWS="60,*">
<FRAME SRC="header.html" NORESIZE SCROLLING="NO"
MARGINHEIGHT="1" MARGINWIDTH="1">
<FRAMESET COLS="120,*">
<FRAME SRC="lftframe.html" NORESIZE SCROLLING="NO"
MARGINHEIGHT="1" MARGINWIDTH="1">
<FRAME SRC="htmintro.html" NAME="mainwindow">
<
/FRAMESET>
<
/FRAMESET>
<
/HTML>
TARGET
lftframe.html
<HTML>
<HEAD>
<TITLE>Buttons<
/TITLE>
<
/HEAD>
<BODY BGCOLOR="#BCD8EB">
<A HREF="htutor01.html" TARGET="mainwindow"><IMG
SRC="lesson1.jpg"></A><BR>
<A HREF="htutor02.html" TARGET="mainwindow"><IMG
SRC="lesson2.jpg"></A><BR>
<A HREF="htutor03.html" TARGET="mainwindow"><IMG
SRC="lesson3.jpg"></A><BR>
<A HREF="htutor04.html" TARGET="mainwindow"><IMG
SRC="lesson4.jpg"></A><BR>
<A HREF="htutor05.html" TARGET="mainwindow"><IMG
SRC="lesson5.jpg"></A><BR>
<
/BODY>
<
/HTML>





<A HREF="filename.html" TARGET="mainwindow"> ... </A>
<A HREF="filename.html"> ... </A>
HTML

TARGET
_top
HTML
mainwindow


_top
HTML
lowercase
_top
_blank
_self

_parent
FRAMESET
/FRAMESET



_parent

_top
_top

<A HREF="mainfile.html" TARGET="_top"><IMG
SRC="mainpage.jpg"></A><BR>
<A HREF="htmintro.html" TARGET="_top"><IMG
SRC="noframes.jpg"></A><BR>
HTML






HTML
Horizontal Rule
HR
<HR>

SIZE
<HR SIZE="5">
<HR SIZE="1">
<HR SIZE="10">
WIDTH
<HR WIDTH="80%">
<HR WIDTH="400">
<HR SIZE="5" WIDTH="60%">
ALIGN
center, left, right
<HR WIDTH="80%" ALIGN="center">
<HR WIDTH="400" ALIGN="left">
<HR SIZE="5" WIDTH="60%" ALIGN="right">

NOSHADE
<HR SIZE="5" WIDTH="60%" ALIGN="center" NOSHADE>
COLOR
MS Explorer

<HR SIZE="5" WIDTH="60%" ALIGN="center" COLOR="#FF0000" NOSHADE>


This is line one<BR>
<!-- This is line two --><BR>
and, this is line three<BR>
This is line one
and, this is line three
BR

CLEAR


ALIGN
right
left
bottom

ALIGN
CLEAR
right
ALIGN
right

left
left
all


RIGHT
<IMG SRC="image.jpg" ALIGN="RIGHT">
<BR CLEAR="right">

BR
CLEAR="right"
left
RIGHT
<IMG SRC="image.jpg" ALIGN="RIGHT">
<BR CLEAR="left">
BR
CLEAR="left"

left
left
LEFT
<IMG SRC="image.jpg" ALIGN="LEFT">
<BR CLEAR="left">

all


<NOBR> ... <
/NOBR>
NO
BReak
HTML


HTML





Paint Shop Pro

<IMG SRC="flowers.jpg" WIDTH="320" HEIGHT="310" BORDER="0"
>
IMG
USEMAP="#map_name"
map_name
ourmap

<IMG SRC="flowers.jpg" WIDTH="320" HEIGHT="310" BORDER="0"
USEMAP="#ourmap"
>
ourmap
<MAP NAME="ourmap">
...
<
/MAP>

HTML
AREA

<MAP NAME="ourmap">
<AREA>
<AREA>
<AREA>
<AREA>
<
/MAP>
SHAPE
COORDS
HREF
SH
APE
RECT
CIRCLE
POLY
<MAP NAME="ourmap">
<AREA SHAPE="poly">
<AREA SHAPE="rect">
<AREA SHAPE="circle">
<AREA SHAPE="poly">
<
/MAP>
COORDS








<MAP NAME="ourmap">
<AREA SHAPE="poly" COORDS="10,10,130,10,110,65,10,140">
<AREA SHAPE="rect" COORDS="28,255,310,300">
<AREA SHAPE="circle" COORDS="140,160,175">
<AREA SHAPE="poly" COORDS="150,10,300,20,315,230">
<
/MAP>
HREF
<MAP NAME="ourmap">
<AREA SHAPE="poly" COORDS="10,10,130,10,110,65,10,140"
HREF="http://www.sakhr.com">
<AREA SHAPE="rect" COORDS="28,255,310,300"
HREF="http://www.ayna.com">
<AREA SHAPE="circle" COORDS="140,160,175"
HREF="http://www.pcmag-arabic.com">
<AREA SHAPE="poly" COORDS="150,10,300,20,315,230"
HREF="http://www.asp.com.lb">
<
/MAP>



<IMG SRC="flowers.jpg" WIDTH="320" HEIGHT="310" BORDER="0"
USEMAP="#ourmap"
>
<MAP NAME="ourmap">
<AREA SHAPE="poly" COORDS="10,10,130,10,110,65,10,140"
HREF="http://www.sakhr.com">
<AREA SHAPE="rect" COORDS="28,255,310,300"
HREF="http://www.ayna.com">
<AREA SHAPE="circle" COORDS="140,160,175"
HREF="http://www.pcmag-arabic.com">
<AREA SHAPE="poly" COORDS="150,10,300,20,315,230"
HREF="http://www.asp.com.lb">
<
/MAP>
MAP
/MAP
USEMAP

USEMAP


BODY
/BODY

USEMAP="#map_name"

Live Image
Mediatec
HTML

HTML

HTML
JavaScript, CGI


HTML
HTML

Text
Option 1
1 2 3



<FORM> ... <
/FORM>
ACTION
Email
CGI
Server

<FORM ACTION="mailto:someone@domain.com"> ... <
/FORM>
<FORM ACTION="name_and_address_of_CGI_script"> ... <
/FORM>
METHOD
ACTION
GET

Server
Post
<FORM ACTION="mailto:someone@domain.com" METHOD="post"> ...
<
/FORM>
<FORM ACTION="name_and_address_of_CGI_script" METHOD="get"> ...
<
/FORM>
ENCTYPE
application/x-www-form-urlencoded
text/plain

MIME
purpose-ultiM
nternetI
ailM
xtentionsE
text/plain
NAME=Yahya Al-Sharif
Address=Nablus , Palestine
Email=yahya@palnet.com
Name

Address, Email
application/x-www-form-urlencoded
NAME=Yahya+Al-
Sharif&Address=Nablus+,+Palestine&Email=yahya@palnet.com
Formaters
text/plain
UrlCook

<FORM ACTION="mailto:email@domain.com" METHOD="post"
ENCTYPE="text/plain">
...
<
/FORM>
INPUT


Sindbad 3.x
Netscape
Please enter your address:
Nablus, Palestine
INPUT

TYPE
TEXT
<FORM ...
>
<INPUT TYPE="text">
<
/
FORM>

TYPE
SELECT
TEXTAREA
<INPUT TYPE="text">
<INPUT TYPE="password">
<INPUT TYPE="hidden">
<INPUT TYPE="radio">
<INPUT TYPE="checkbox">
<INPUT TYPE="submit">

<INPUT TYPE="reset">

<INPUT TYPE="button">

TYPE
INPUT
NAME
address

<FORM ...
>
<INPUT TYPE="text" NAME="address">
<
/
FORM>
Please
enter your address

NAME

<FORM ...>
Please enter your address :
<INPUT TYPE="text" NAME="address">
<
/
FORM>
Please enter your address :
Nablus, Palestine

VALUE


<FORM ...>
Please enter your address :
<INPUT TYPE="text" NAME="address"
VALUE="Nablus, Palestine">
<
/
FORM>
Please enter your address :
Nablus, Palestine
SIZE

<FORM ...>
Please enter your address :
<INPUT TYPE="text" NAME="address"
VALUE="Nablus, Palestine" SIZE="40">
<
/
FORM>
Please enter your address :
Nablus, Palestine

Please enter your address :
Nablus, Palestine
SIZE
MAXLENGTH
<FORM ...>
Please enter your address :
<INPUT TYPE="text" NAME="address"
VALUE="Nablus, Palestine"
SIZE="40" MAXLENGTH="30">
<
/
FORM>
Please enter your address :
Nablus, Palestine

INPUT
TYPE
NAME

VALUE

SIZE
MAXLENGTH
password
text
<FORM ...>
Please enter your name :
<INPUT TYPE="text" NAME="the name" VALUE="" SIZE="40"
MAXLENGTH="30">
Please enter your passwod :
<INPUT TYPE="password" NAME="the password" VALUE="" SIZE="40"
MAXLENGTH="30">
<
/
FORM>
Please enter your name :
Please enter your password :

VALUES


hidden

<FORM ...>
Please enter your name :
<INPUT TYPE="text" NAME="the name" VALUE="" SIZE="40"
MAXLENGTH="30">
<INPUT TYPE="hidden" NAME="my forms" VALUE="form1">
Please enter your passwod :
<INPUT TYPE="password" NAME="the password" VALUE="" SIZE="40"
MAXLENGTH="30">
<
/
FORM>
Please enter your name :
Please enter your passwod :


<INPUT TYPE="hidden" NAME="my forms" VALUE="form1">
<INPUT TYPE="hidden" NAME="my forms" VALUE=" form2">
<INPUT TYPE="hidden" NAME="my forms" VALUE=" form3">

my forms=form1
my forms=form2

my forms=form3


<FORM ...>
<TABLE BORDER="0">
<TR>
<TD>Please enter your name : <
/TD>
<TD>
<INPUT TYPE="text" NAME="the name" VALUE="" SIZE="40"
MAXLENGTH="30">
<
/
TD>
<
/TR>
<TR>
<TD>Please enter your password :<
/TD>
<TD>
<INPUT TYPE="password" NAME="the password" VALUE="" SIZE="40"
MAXLENGTH="30">
<
/TD>
<
/
TR>
<
/TABLE>
<
/
FORM>

Please enter your name :
Please enter your password :
HTML
Text, Password, Hidden

Radio

Checkbox
RADIO
RADIO
Sindbad 3.0

Sindbad 3.0
Sindbad 4.0
Ms Explorer 3.0
Ms Explorer 4.0
<FORM>
<
/FORM>
INPUT

<FORM>
<INPUT TYPE="radio">
<
/FORM>
<FORM>
<INPUT TYPE="radio"> <BR>
<INPUT TYPE="radio"> <BR>
<INPUT TYPE="radio"> <BR>
<INPUT TYPE="radio"> <BR>
<
/FORM>
NAME


browser
<FORM>
<INPUT TYPE="radio" NAME="browser"> <BR>
<INPUT TYPE="radio" NAME="browser"> <BR>
<INPUT TYPE="radio" NAME="browser"> <BR>
<INPUT TYPE="radio" NAME="browser"> <BR>
<
/FORM>

browser

VALUE

<FORM>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind3"> <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind4"> <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie3"> <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> <BR>
<
/FORM>


<FORM>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind3"> Sindbad 3.0 <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind4"> Sindbad 4.0<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie3"> MS Explorer 3.0<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> MS Explorer 4.0<BR>
<
/FORM>
Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0

CHECKED
<FORM>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind3"> Sindbad 3.0 <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind4" CHECKED>
Sindbad 4.0
<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie3"> MS Explorer 3.0<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> MS Explorer 4.0<BR>
<
/FORM>
Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0

browser=Msie3
CHECKBOX

Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0
CHECKBOX

RADIO
RADIO
<FORM>
<INPUT TYPE="checkbox" NAME="Sind3" VALUE="Yes"> Sindbad 3.0 <BR>
<INPUT TYPE="checkbox" NAME="Sind4" VALUE="Yes"> Sindbad 4.0 <BR>
<INPUT TYPE="checkbox" NAME="Msie3" VALUE="Yes"> MS Explorer 3.0
<BR>
<INPUT TYPE="checkbox" NAME="Msie4" VALUE="Yes"> MS Explorer 4.0
<BR>
<
/FORM>
checkbox
TYPE
NAME
VALUE
RADIO
CHECKBOX
RADIO
CHECKBOX
Sind4=Yes
Msie4=Yes
RADIO
CHECKED
<FORM>
<INPUT TYPE="checkbox" NAME="Sind3" VALUE="Yes" CHECKED>
Sindbad 3.0
<BR>
<INPUT TYPE="checkbox" NAME="Sind4" VALUE="Yes"> Sindbad 4.0 <BR>
<INPUT TYPE="checkbox" NAME="Msie3" VALUE="Yes" CHECKED>
MS Explorer 3.0
<BR>
<INPUT TYPE="checkbox" NAME="Msie4" VALUE="Yes"> MS Explorer 4.0
<BR>
<
/FORM>
Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0
INPUT
<SELECT>
<OPTION>
<OPTION>
<OPTION>
.....
.....
<
/SELECT>
SELECT
SELECT

OPTION


<FORM>
<SELECT>
<OPTION> Sindbad 3.0
<OPTION> Sindbad 4.0
<OPTION> MS Explorer 3.0
<OPTION> MS Explorer 4.0
<
/SELECT>
<
/FORM>
Sindbad 3.0
SELECT

NAME
SIZE
<FORM>
<SELECT NAME="browser" SIZE="2">
<OPTION> Sindbad 3.0
<OPTION> Sindbad 4.0
<OPTION> MS Explorer 3.0
<OPTION> MS Explorer 4.0
<
/SELECT>
<
/FORM>
Sindbad 3.0
Sindbad 4.0

MULTIPLE
SIZE
<FORM>
<SELECT NAME="browser" SIZE="4" MULTIPLE>
<OPTION> Sindbad 3.0
<OPTION> Sindbad 4.0
<OPTION> MS Explorer 3.0
<OPTION> MS Explorer 4.0
<
/SELECT>
<
/FORM>
Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0
ctrl
OPTION
VALUE
SELECTED
OPTION
<FORM>
<SELECT NAME="browser" SIZE="4" MULTIPLE>
<OPTION VALUE="Sindbad 3.0"> Sindbad 3.0
<OPTION VALUE="Sindbad 4.0" SELECTED> Sindbad 4.0
<OPTION VALUE="MS Explorer 3.0"> MS Explorer 3.0
<OPTION VALUE="MS Explorer 4.0"> MS Explorer 4.0
<
/SELECT>
<
/FORM>
Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0
TEXTAREA
<TEXTAREA> ... <
/TEXTAREA>
NAME
VALUE

<TEXTAREA NAME="comments">
Hello, please write your comments here :-)
<
/TEXTAREA>
Hello, please w rite your comments here :-)

COLS
ROWS
<TEXTAREA NAME="comments" COLS="30" ROWS="6">
<
/TEXTAREA>
WRAP
MS Explorer
virtual
<TEXTAREA NAME="comments" COLS="30" ROWS="6" WRAP="virtual">
<
/TEXTAREA>
physical
<TEXTAREA NAME="comments" COLS="30" ROWS="6" WRAP="physical">
<
/TEXTAREA>
off
<TEXTAREA NAME="comments" COLS="30" ROWS="6" WRAP="off">
<
/TEXTAREA>
INPUT
submit
<INPUT TYPE="submit">

Submit
Submit Query
Netscape

VALUE
<INPUT TYPE="submit" VALUE="Press here to send the form">
Press here to send the form
reset
TYPE
INPUT
submit

<INPUT TYPE="reset" VALUE="Forget about it">
Forget about it
INPUT
button

JavaScript
reset, submit

<INPUT TYPE="button" VALUE="This is a sample button">
HTML


Best Viewed with Netscape Navigator
Best Viewed with MS Internet
Explorer

HTML
Browser Specific Tags
UL
TYPE


Plugin
Sindbad
3.x

Ms Internet Explorer 3.x
3.x


HTML
MS Explorer 1
Netscape Navigator
MS Explorer 2
HTML

Scanner


Scanner




Netscape
MS Internet Explorer


<HTML>
<HEAD>
<TITLE> ... <
/TITLE>
<
/HEAD>
<BODY>
....
<
/BODY>
<
/HTML>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-
1256">

HEAD
/HEAD
TITLE
/TITLE

<HTML>
<HEAD>
<TITLE> ... <
/TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-
1256 ">
<
/HEAD>
<BODY>
....
<
/BODY>
<
/HTML>
charset=windows-1256


Code Page
DOS









Windows-1256, DOS-720

ISO-8859-6
Windows-1256

charset=windows-1256

MS
Explorer

Bi-
Directional
BiDi


P
DIR
rtl

ltr
<P DIR="rtl" ALIGN="right"> ... <
/P>
<P DIR="ltr" ALIGN="left"> ... <
/P>
DIR
ALIGN
Plugin
Netscape

DIR
DIR


<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=windows-1256">
<P DIR="rtl" ALIGN="right"> ... <
/P>
<P DIR="ltr" ALIGN="left"> ... <
/P>


OXFD
ALT

ALT+0253

META
HTML


HTML





Build it, and they will come

HTML

HTML

HTML



Yahoo

Altavista

Search Engines
Altavista

Crawlers
Spiders


Directories
Yahoo


Yahoo
Regional: Regions: Middle East: Countries and Regions: Palestinian Authority:
Cities and Regions: Nablus
Regional
Region
Middle East
Altavista


META

HEAD
/HEAD
Altavista, Hotbot, Infoseek
Yahoo

HTML
META
HTTP-EQUIV
<HEAD>
.
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-
1256">
NAME
CONTENT
Server Side
Client
Side
HTTP-EQUIV...
Content-Type
Content
text/html
HTML
Windows-
1256 ...
.
NAME
keywords
<META NAME="keywords" ... >
Content
<META NAME="keywords"CONTENT="html,webpage design,psp,paint shop
pro,arabic site">

<META NAME="keywords"CONTENT="html,html,html,html,webpage
design,psp,paint shop pro,arabic site">
description
<META NAME="description" CONTENT="Html and Paint Shop Pro tutorials in
Arabic,learning web page design in Arabic">
author
<META NAME="author" CONTENT="Abu Al-Abed">
copyright
<META NAME="copyright" CONTENT="....">
META
<HEAD>
<TITLE> ... <
/TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-
1256">
<META NAME="keywords" CONTENT=" ... ">
<META NAME="description" CONTENT=" ... ">
<META NAME="author" CONTENT=" ... ">
<META NAME="copyright" CONTENT=" ... ">
<
/HEAD>


Altavista
Add Page
Infoseek
Excite
HotBot
Add URL
Yahoo
How
To Suggest a
Site


AddWeb
Submission Wizard

